import Compatibility from "../_compatibility.mdx";
import RNSVG from "./_rn-svg.mdx";

# Stroke

## Usage

<RNSVG />

```tsx
import { styled } from "nativewind";
import { Svg, Rect } from "react-native-svg";

const StyledRect = styled(Rect, { classProps: ["fill", "stroke"] });

function MyStyledSvg({ stroke, ...props }) {
  return (
    <Svg height="100" width="100" {...props}>
      <StyledRect x="0" y="0" width="100" height="100" stroke={stroke} />
    </Svg>
  );
}

<MyStyledSvg stroke="stroke-blue-500" />;
```

## Compatibility

<Compatibility
  supported={["stroke-{n}", "stroke-[n]"]}
  none={["stroke-inherit", "stroke-current"]}
/>
